<!DOCTYPE html>
<html>
	<head>
<meta charset="UTF-8">
<title>购买页面</title>

<style type="text/css">
*{
	margin:0px;
	padding:0px;
}.shop{
	width:900px;
	height:300px;
	border:1px solid red;
	margin:0 auto;
}.shoping{
	width:290px;
	height:300px;
	float:left;
	border:1px solid pink;
	margin-left:5px;
}.shoping>.imgs{
	width:200px;
	height:200px;
	margin:0 auto;
	border:1px solid gold;
	margin-top:10px;
}.imgs>img{
	width:200px;
	height: 200px;
}.car{
	width:900px;
	height:auto;
	/*border:1px solid blue;*/
	margin:0 auto;
	margin-top:10px;
}.shoping p{
	text-align: center;
}.gocar{
	width:100px;
	height:40px;
	background:red;
	border:none;
	color:#FFF;
}
#TB img{
	width: 100px;
	height: 100px;
}
</style>
	</head>
	<body>
		<div class='shop'>
		<div class='shoping'>
			<div class='imgs'>
				<img src="../static/商品1.jpg"/>
			</div>
			<div class='title'>
				<p class='name'>xpx玻璃杯</p>
				<p class='pic'>49元</p>
				<p>
					<button class='gocar'>加入购物车</button>
				</p>
			</div>
		</div>
		<div class='shoping'>
			<div class='imgs'>
				<img src="../static/商品2.jpg"/>
			</div>
			<div class='title'>
				<p class='name'>xpx充电宝</p>
				<p class='pic'>99元</p>
				<p >
					<button class='gocar'>加入购物车</button>
				</p>
			</div>
		</div>
		<div class='shoping'>
			<div class='imgs'>
				<img src="../static/商品3.jpg"/>
			</div>
			<div class='title'>
				<p class='name'>xpx背包</p>
				<p class='pic'>195元</p>
				<p>
					<button class='gocar'>加入购物车</button>
				</p>
			</div>
		</div>
	<div class="car">
		<table width="900" border="1" cellspacing="0" id="TB">

			<tr>
				<th width="40">
					<input type="checkbox" class="qx">
				</th>
				<th width="200">商品名字</th>
				<th width="150">图片</th>
				<th>价格</th>
				<th>数量</th>
				<th>单价</th>
				<th>操作</th>
			</tr>
		</table>
	</div>
	</div>
    <a href="/chonggong">
    <button class='gocar'>结算</button>
	</a>

	</body>
	<script type="text/javascript">
		var obtn=document.getElementsByClassName('gocar')
		var otble=document.getElementById('TB')
		var imgs=document.getElementsByClassName('imgs')
		var oname=document.getElementsByClassName('name')
		var pic=document.getElementsByClassName('pic')
	for (var i=0;i<obtn.length;i++) {
		obtn[i].index=i;
		obtn[i].onclick=function(){
			// 当前 图片 名字 价格
			var onames=oname[this.index].innerHTML
			var opic=pic[this.index].innerHTML
			var oimg=imgs[this.index].innerHTML
			var otbody=otble.children[0]
			// 创建 tr
			var tr=document.createElement('tr');
			//在tr里面拼接代码
			tr.innerHTML="<th><input type='checkbox'/></th>"+
			'<th>'+onames+'</th>'+'<th>'+oimg+'</th>'
			+'<th>'+opic+'</th>'+'<th><button class="up">-</button><span class="number">1</span><button class="down">+</button></th>'
			+'<th class="dj">'+opic+'</th>'
			+'<th><span class="sc">删除</span>'
			//添加tr
			otbody.appendChild(tr)
		//功能
		// 获取tr
		var tr1=document.getElementsByTagName('tr')
		for (var i=0;i<tr1.length;i++) {
			tr1[i].index=i;
		tr1[i].onclick=function(e){
		var e=e||window.event;
		// target 返回点击目标  this 当前对象
		var el=e.target||e.srcElement;
	    //获取点击class
		var cls=el.className
		var shuliag=this.getElementsByClassName('number')[0]
		var val=Number(shuliag.innerHTML)
		// switch 判断固定值
		switch(cls){
			case "down":
		    shuliag.innerHTML=val+1;
		    str(this)
		    break;
			case "up":
			if(val>1){
			shuliag.innerHTML=val-1;
			}
			str(this)
			break;
			case "sc":
			var conf = confirm('确定删除此商品吗？');
			if(conf){
			this.parentNode.removeChild(this)
			}

		  }
		}
	}
		function str(cc){
		var oa=cc.cells;
		var oa3=oa[3].innerHTML;
		var shuliang=oa[4].getElementsByClassName('number')[0].innerHTML
		oa[5].innerHTML=Number(oa3)*Number(shuliang)
		if(Number(shuliang)==1){
			alert("最后一件了")
		}
	}


	}
}




	</script>
</html>
